﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div>
    <div class="panel panel-info" style="margin: 50px 50px 5px 50px">
        <div class="panel-heading">
            <span>商品组现主要用于店铺装修调用</span>
        </div>
    </div>
</div>
<div class="container-fluid" style="margin:10px 50px 10px 50px">
    <div class="row">
        <div class="col-sm-2">
            <a class="btn btn-primary" href="{:url('add')}">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                添加新组</a>
        </div>
        <form class="col-sm-10"action="{:url('search')}" method="post">
                <div class="form-inline col-sm-12 col-sm-offset-7" >
                    <input type="text" class="form-control col-sm-8" id="exampleInputEmail2" name="content" placeholder="请输入商品组名称进行搜索">
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button>
                </div>
            </div>
        </form>
    </div>
</div>
<hr>
<div class="btn-toolbar" style="margin:10px 50px 10px 50px">
    <div class="btn-group">
        <div class="btn btn-default">&emsp;<input type='checkbox' class="all" style="width:15px;height:15px" data="0" value=""/>&emsp;</div>
    </div>
    <div class="btn-group">
        <button class="btn btn-default showAll"><span class="glyphicon glyphicon-eye-open"></span>显示</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default hideAll"><span class="glyphicon glyphicon-eye-close"></span>隐藏</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default delAll"><span class="glyphicon glyphicon-trash"></span>删除</button>
    </div>
</div>

<div style="margin: 10px 50px 10px 50px">
    <table class="table table-hover" style="width:100%">
            <tr>
                <th></th>
                <th>商品组名称</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="l1 in data">
                <td>
                    <div style="margin-left: 25px">
                        <input type='checkbox'  v-bind:value="l1.id">
                    </div>
                </td>
                <td>{{l1.name}}</td>
                <td>{{l1.status}}</td>
                <td><a v-bind:href="editUrl+'?id='+l1.id">修改</a>
                    <a v-bind:href="delUrl+'?id='+l1.id">删除</a></td>
            </tr>
    </table>
</div>
<div>...</div>
<script>
   var app=new Vue({
       el:"table",
       data: {
           editUrl:"{:url('edit')}",
           delUrl:"{:url('delete')}",
           data:[
               {
                   name: "珙县24小时服务",
                   status: "启用",
                   id:11
               },
   {
       name:"珙县24小时服务",
       status: "启用",
       id:12
   }
   ]
   }
   });
   app.data[1].name="12311111456";

   $('input').iCheck({
       labelHover : false,
       cursor : true,
       checkboxClass : 'icheckbox_square-blue',
       radioClass : 'iradio_square-blue',
       increaseArea : '20%'
   });
</script>
</body>
</html>